<template>
    <div>
        <svg-icon icon-class="message" @click="dialogVisible = true" />
        <el-dialog :visible.sync="dialogVisible" :before-close="handleClose">
            <div class="speck-all clearfix">
                <div class="speck-side">
                    <ul>
                        <li v-for="item, index in allUserList" :class="{ 'select': item.userId == selectUser.userId }"
                            :key="index" @click="selectChatUser(item)">{{ item.nickName }}</li>
                    </ul>
                </div>
                <div class="speck-main">
                    <div class="speck-header">
                        <img :src="selectUser.avatar">
                        {{ selectUser.nickName }}
                    </div>
                    <div class="speck-content">
                        <div v-for="msg,index in messageList" :key="index">{{ msg }}</div>
                    </div>
                    <div class="speck-input">
                        <el-input v-model="input">
                            <el-button slot="append" icon="el-icon-search" @click="sendMsg">发送</el-button>
                        </el-input>
                    </div>
                </div>
            </div>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
            </span> -->
        </el-dialog>
    </div>


</template>

<script>

import { mapGetters } from 'vuex'
import { listUser, deptTreeSelect } from "@/api/system/user";
export default {
    name: 'chat',
    computed: {
        ...mapGetters([
            'userId',
        ])
    },
    data() {
        return {
            dialogVisible: false,
            url: 'https://www.yuque.com/u1024153/icipor/vh4wfl',
            socketServer: null,
            input: "",
            allUserList: [],
            selectUser: {},
            messageList:[]
        }
    },
    methods: {
        goto() {
            window.open(this.url)
        },
        handleClose(done) {
            // this.$confirm('确认关闭？')
            //     .then(_ => {
            //         done();
            //     })
            //     .catch(_ => { });
            done();
        },
        sendMsg() {
            this.$websocket.sendWebsocket(JSON.stringify({
                "messageType": "user",
                "userId": this.userId,
                "chatId": this.selectUser.userId,
                "message": this.input
            }));
        },
        getSocketData(res) {
            //TODO 区分消息类型，通知类消息，聊天消息 
            console.log(res.detail.data.message);
            this.messageList.push(res.detail.data.message)
            // this.PieValue = Number(res.detail.data.sendInfoStr.onlineUserCount);
            // this.userNumValue = Number(res.detail.data.sendInfoStr.totalUserCount);
        },
        getAllUsers() {
            listUser().then(res => {
                console.log(res)
                this.allUserList = res.rows;
            })
        },
        selectChatUser(user) {
            this.selectUser = user
            console.log(user)
        }
    },
    mounted() {
        this.getAllUsers();
        this.$websocket.initWebSocket(this.userId);
        window.addEventListener("onmessageWS", this.getSocketData);
    },

}
</script>
<style lang="scss">
.speck-all {
    height: 500px;
    cursor: auto;


    .speck-side {
        width: 20%;
        float: left;
        height: 500px;

        li {
            text-align: center;
            line-height: 3em;
            height: 3em;
            cursor: pointer;
        }

        .select {
            background-color: #EEE;
        }

        li:hover {
            background-color: #EEE;
        }
    }

    .speck-main {
        border-left: 1px solid #EEE;
        width: 80%;
        float: right;
        // background-color: rgb(53, 53, 165);
        height: 500px;
        display: flex;
        flex-direction: column;

        .speck-header {
            border-bottom: 1px solid #EEE;
            padding-left: 10px;
        }

        .speck-content {
            flex: 1;
            background-color: #F2F6FC;
        }

        .speck-input {
            border-top: 1px solid #EEE;

            .el-input {
                margin: 3px 5px;
            }

            // background-color: rgb(187, 37, 174);
        }
    }
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
</style>